<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       body{
        margin: 0;
        padding: 0;
        }
    .background{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558253763122&di=926e156f39b65dbf6ae5670fe10054cf&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-11%2F5a5749be588c2.jpg) no-repeat center;
    background-size: cover;
    position: fixed;
    
    }
    .box{
   background: linear-gradient(to right,rgb(216, 224, 217),rgba(54, 146, 46, 0));
    width: 100%;
    height:100%;
    padding-top: 50px;

     }
        .card {
            width: 350px;
            height: 400px;
            margin: 50px;
            margin-left: 100px;
            box-shadow: 0 30px 50px 0 rgba(241, 205, 3, 0.808);
            border-radius: 15px;
        }
        .head {
            width: 350px;
            height: 160px;
            border-radius: 15px 15px 0 0;
            margin: 0px;
            background-image: linear-gradient(135deg, rgb(170, 207, 170) 0%, rgb(234, 250, 146) 100%);
        padding: 20px 0px;
        }
        .header{
            width: 100px;
            height: 100px;
            margin: 30px auto;
            border-radius: 50%;
            background: url(http://img4.imgtn.bdimg.com/it/u=3943888639,3542501503&fm=11&gp=0.jpg) no-repeat center;
            background-size: cover;
            border: 2px solid #FCC58D;
        }
      
        .former {
        padding: 0px 20px;
        margin: 15px auto;
    }

    .inner {
        position: relative;
        margin-bottom: 10px;
        height: 40px;
        background: #FFFFFF;
        border: 1px solid #DFE2E6;
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
        border-radius: 20px;
    }

    .inner input {
        width: 220px;
        height: 38px;
        border: none;
        margin-left: 40px;
        outline: 0;
        font-size: 13px;
        font-weight: lighter;
        color: rgb(59, 61, 63);
        text-align: left;
    }

    .icon1 {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 20px;
        height: 16px;
        background: url(https://4.url.cn/zc/v3/img/mail-entry.png) no-repeat center;
        background-size: contain;
    }
    .icon2 {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 20px;
        height: 16px;
        background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2916966813,830195461&fm=26&gp=0.jpg) no-repeat center;
        background-size: contain;
    }
       .butto{
           width: 310px;
           height: 38px;
           margin:0;
       } 
    .butto button{
        width: 140px;
        height: 38px;
        border-radius: 20px;
    }
    .sign{
        border: 1px green solid;
    background: white;
    margin-right: 20px;

    }
    .enter{
        border: 1px green solid;
    background: green;
    }
    .inner_title{
    font-size: 10px;
    font-weight: lighter;
    color: rgb(59, 61, 63);
    text-align: left;
    height: 10px;
    margin: 5px 0;
}
    </style>
</head>
<body>
    <!--背景-->
    <div class="background">
        <div class="box">
            <!--登录内容-->
            <div class="card">
        <div class="head">
                <div class="header"></div>
        </div>
        <div class="former">
            <!-- 表单 -->
            <div class="inner_title"> 账号</div>
            <div class="inner">
                 <input type="text"placeholder="请输入账号">
                    <span class="icon1" ></span>
                </div>
                <div class="inner_title">密码</div>
                <div class="inner">
                    <input type="text"placeholder="请输入密码">
                    <span class="icon2" ></span>
                </div>
                <div class="butto">
                        <button type="button"  class="sign">注册</button>
                        <button type="button"  class="enter">登录</button>
                </div>
                
        </div>
    </div>
</div>
    </div>


</body>
</html>